<template>
	<table>
		<tr>
			<th v-for="item in columns" :key="item.prop">{{ item.label }}</th>
		</tr>
		<tr v-for="item in tableData" :key="item.id">
			<td>{{ item.id }}</td>
			<td>{{ item.url }}</td>
			<td>{{ item.title }}</td>
			<td>{{ item.nick }}</td>
			<td>
				<template v-if="$slots['url']">
					<slot :name="'url'" :row="item"></slot>
				</template>
			</td>
		</tr>
	</table>
</template>

<script setup lang="ts">
// import { useSlots } from 'vue'
defineProps({
	columns: Array,
	tableData: Array
})
// const slots = useSlots()
// console.log('slots >>> ', slots)
</script>

<style lang="scss" scoped>
table {
	width: 100%;
	tr {
		align-items: center;
	}
}
</style>
